<template>
  <el-dialog  :visible.sync="dialogVisible" width="30%">
    <el-popover ref="popCatelogSelect" placement="right-end" v-model="popCatelogSelectVisible">
      <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button>
      </div>
    </el-popover>
    <el-button v-popover:popCatelogSelect>新增关联</el-button>
    <el-table :data = "dataList" style="{width:100%;}">
      <el-table-column label = "#" prop = "id">
      </el-table-column>
      <el-table-column label = "品牌名" prop = "brandName">
      </el-table-column>
      <el-table-column label = "分类名" prop = "catelogName">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
         <template slot-scope="scope">
           <el-button type="text" size="small" @click="deleteRelationHandle(scope.row)">移除</el-button>
         </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import relationService from '@/api/product/brandCategoryRelation.js'
import CategoryCascader from '../common/category-cascader'
export default {
  name: "attrgroup",
  components: {CategoryCascader},
  data(){
    return {
      catelogPath: [],
      popCatelogSelectVisible: false,
      dialogVisible: false,
      brandId: 0,
      dataList: []
    }
  },
  methods: {
    deleteRelationHandle(row){
      this.$confirm(`确定删除编号#${row.id}的数据吗`,'提示',{
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(()=>{
        relationService.delete([row.id]).then(({data})=>{
          if( data && data.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getCateRelation()

          }
        })
      }).catch()
    },
    getCateRelation(){
        relationService.getList( {brandId: this.brandId}).then(({data}) => {
          console.log('getCateRelation:',data)
          if( data && data.code === 0) {
            this.dataList =data.data
          }
        })
    },
    init(brandId) {
      this.brandId = brandId
      this.dialogVisible = true
      this.$nextTick( ()=>{
        this.getCateRelation()
      })
    },
    addCatelogSelect(){
      relationService.saveDetail({catelogId:this.catelogPath[this.catelogPath.length - 1], brandId:this.brandId}).then(({data})=> {
        if( data && data.code === 0) {
          this.$message({
            message: '新增关系成功',
            type: 'success'
          })
        }
        console.log(data)
        this.catelogPath = []
        this.getCateRelation()
      })
    }

  },
  // 创建完成,可以访问this对象
  created() {
  },
  // 挂载完成，可以访问dom元素
  mounted() {
  },

  watch: {},
  calculate(){},
  // 创建之前
  beforeCreate() {
  },
  // 挂载之前
  beforeMount() {
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeDestroy() {
  },
  // 销毁之后
  destroyed() {
  },
  // 如果页面有keep-alive缓存功能,这个函数会触发
  activated() {
  },
}
</script>

<style scoped>

</style>
